<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>车主信息管理系统</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="shortcut icon" href="/img/1.ico" type="image/x-icon">
<!--    <link rel="stylesheet" href="../static/css/admin.css">-->
    <style>
        .sidebar {
            background-color: #f8f9fa;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            width: 200px;
            padding: 20px;
        }
        .main-content {
            margin-left: 200px;
            padding: 20px;
        }
        .form-container {
            display: none;
        }
        .form-container.active {
            display: block;
        }
		
		.btn-outline-secondary:hover{
			background-color: limegreen;
		}
    </style>
</head>
<body>
    <div class="sidebar">
        <h1 class="text-center my-5">用户操作界面</h1>
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link" href="#add-owner-form" onclick="showForm('add-owner-form')">注册车主信息</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#get-owner-form" onclick="showForm('get-owner-form')">查询车主信息</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#plate-form" onclick="showForm('plate-form')">车俩信息录入</a>
            </li>

        </ul>
    </div>
    <div class="main-content">
        <div class="container">
            <div id="add-owner-form" class="form-container">
                <h2>注册车主信息</h2>
                <form>
                    <div class="form-group">
                        <label for="add-id-code">身份证号</label>
                        <input type="text" class="form-control" id="add-id-code" name="id_code" required>
                    </div>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="gender">性别</label>
                        <select class="form-control" id="gender" name="gender" required>
                            <option value="">请选择</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="birthdate">出生日期</label>
                        <input type="date" class="form-control" id="birthdate" name="birthdate" required>
                    </div>
                    <div class="form-group">
                        <label for="mobile_phone">手机号码</label>
                        <input type="text" class="form-control" id="mobile_phone" name="mobile_phone" required>
                    </div>
                    <div class="form-group">
                        <label for="email">电子邮件地址</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <button type="submit" class="btn btn-primary">提交</button>
                </form>
            </div>
            <hr>
            <div id="get-owner-form" class="form-container">
                <h2>查询车主信息</h2>
                <form>
                    <div class="form-group">
                        <label for="get-id-code">身份证号</label>
                        <input type="text" class="form-control" id="get-id-code" name="id_code" required>
						<label for="get-email">电子邮件</label>
						<input type="email" class="form-control" id="get-email" name="email" required>
<!--                        <label for="get-name">电子邮件:</label>-->
<!--                        <input type="text" class="form-control" id="get-name" name="name" required>-->
                    </div>
                    <button type="submit" class="btn btn-primary">查询</button>
                </form>
                <div id="owner-info" class="mt-3"></div>
            </div>
            <hr>
            <div id="plate-form" class="form-container">
                <h2>车俩信息录入</h2>
                <form >
					
                    <label for="plate_number">车牌号码：</label>
                    <input type="text"  name="plate_number" id="plate_number" required>
                    <button type="button" class="btn btn-outline-secondary" id="random-plate">随机</button>
                    <br>

					
                    <label for="city">城市：</label>
                    <input type="text" name="city" id="city" required><br>

                    <label for="reg_date">注册日期：</label>
                    <input type="date" name="reg_date" id="reg_date" required><br>


                    <label for="id_code">身份证号：</label>
                    <input type="text" name="id_code" id="id_code" required><br>

                    <label for="brand">品牌：</label>
                    <input type="text" name="brand" id="brand" required><br>

                    <label for="model">车型：</label>
                    <input type="text" name="model" id="model" required><br>

                    <label for="color">颜色：</label>
                    <input type="text" name="color" id="color" required><br>

                    <label for="engine_code">发动机型号：</label>
                    <input type="text" name="engine_code" id="engine_code" required><br>

                    <label for="type">类型：</label>
                    <input type="text" name="type" id="type" required><br>

                    <label for="user_id">执行操作的用户名：</label>
                    <input type="text" name="user_id" id="user_id" required><br>

                    <button type="submit" class="btn btn-primary">提交</button>
                </form>
                <div id="result" class="mt-3"></div>
            </div>


        </div>
    </div>
    <script>
        function showForm(formId) {
            $('.form-container').removeClass('active');
            $('#' + formId).addClass('active');
        }
// <!--           随机按钮监控-->
        const randomButton = document.getElementById('random-plate');
        const plateNumberField = document.getElementById('plate_number');

        randomButton.addEventListener('click', (event) => {
          event.preventDefault();
          fetch('http://127.1.1.1:888/api/random-plate')
            .then(response => response.json())
            .then(data => {
              plateNumberField.value = data.plateNumber;
            })
            .catch(error => console.error(error));
        });



        $(function() {
            // 注册车主信息表单提交
            $('#add-owner-form form').submit(function(event) {
                event.preventDefault();
                var form = $(this);
                $.ajax({
                    url: 'http://127.1.1.1:888/api/owner',
                    method: 'POST',
                    data: form.serialize(),
                    success: function(response) {
                        alert(response.message);
                        form.trigger('reset');
                    },
                    error: function(response) {
                        alert(response.responseJSON.error);
                    }
                });
            });

            // 查询车主信息表单提交
            $('#get-owner-form form').submit(function(event) {
                event.preventDefault();
                var form = $(this);
                $.ajax({
                    url: 'http://127.1.1.1:888/api/owner/' + form.find('#get-id-code').val(),
                    method: 'GET',
					data:{'email':form.find('#get-email').val()},
                    success: function(response) {
                        var ownerInfo = '<h3>车主信息</h3>';
						ownerInfo += '<p>序号:' + response.id +'</p>'
                        ownerInfo += '<p>身份证号：' + response.id_code + '</p>';
                        ownerInfo += '<p>姓名：' + response.name + '</p>';
                        ownerInfo += '<p>性别：' + response.gender + '</p>';
                        ownerInfo += '<p>出生日期：' + response.birthdate + '</p>';
                        ownerInfo += '<p>车牌号码：' + response.plate_number + '</p>';
                        ownerInfo += '<p>手机号码：' + response.mobile_phone + '</p>';
                        ownerInfo += '<p>电子邮件地址：' + response.email + '</p>';
                        $('#owner-info').html(ownerInfo);
                    },
                    error: function(response) {
                        // alert(response.responseJSON.error);
                        // $('#owner-info').html('');
						var errorMessage = response.responseJSON.error;
						var errorElement = document.getElementById("owner-info");
						errorElement.innerHTML = errorMessage;


                    }
                });
            });



            // 车牌信息录入表单提交
            $('#plate-form form').submit(function(event) {
                event.preventDefault();
                var form = $(this);
                $.ajax({
                    url: 'http://127.1.1.1:888/submit',
                    method: 'POST',
                    data: form.serialize(),
                    success: function(response) {
                        $('#result').text(response.message);
                        form.trigger('reset');
                    },
                    error: function(xhr, status, error) {
                        var response = JSON.parse(xhr.responseText);
                        $('#result').text(response.error);
                        }
                    });
                });
            });









    </script>
</body>
</html>
